<template>
  <div class="search-left-component">
    <div  ref="scrollContainer" class="scroll-container">
      <div v-if="specialImage" class="special-image-popup">
      <img :src="specialImage" alt="Special Image" />
    </div>
    <div v-else v-for="result in results" :key="result.clubId" class="club-info" @click="navigateToClub(result.clubId)">
      <div class="club-header">
          <img :src="result.logoUrl" alt="Club Logo" class="club-logo">
          <div class="club-header-text">
            <h3>{{ result.clubName }}</h3>
            <p class="leader">Leader: <strong>{{ result.leaderName }}</strong></p>
          </div>
        </div>
        <div class="club-body">
          <p>{{ result.clubDescription }}</p>
          <p class="category">Category: <strong>{{ result.category }}</strong></p>
          <p class="status">Status: <span :class="{ 'open': result.clubStatus === '开放中' }">{{ result.clubStatus }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    results: {
      type: Array,
      required: true
    },
    specialImage: {
      type: String,
      default: null
    }
  },
  methods: {
    navigateToClub(clubId) {
      this.$router.push({ name: "ClubDetail", query: { clubId: clubId } });
    },
    handleScroll(event) {
      // 获取滚动条的高度
      const scrollHeight = event.target.scrollHeight;
      // 获取可视区域的高度
      const clientHeight = event.target.clientHeight;
      // 获取已滚动距离
      const scrollTop = event.target.scrollTop;

      if (scrollTop + clientHeight >= scrollHeight) {
        // 滚动到底部，触发事件或执行其他操作
        console.log('已滚动到底部');
      }
    }
  },
  mounted() {
    this.$refs.scrollContainer.addEventListener('scroll', this.handleScroll);
  },
  beforeUnmount() {
    this.$refs.scrollContainer.removeEventListener('scroll', this.handleScroll);
  }
};
</script>

<style scoped>
.search-left-component {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* 控制社团信息块之间的间距 */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 97%;
  padding: 20px;
  background-color: #f9f9f9;
}

.club-info {
  border: 1px solid #e0e0e0;
  /* 边框颜色 */
  border-radius: 10px;
  /* 圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
  overflow: hidden;
  /* 确保子元素不溢出圆角 */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  /* 平滑过渡效果 */
  cursor: pointer;
  /* 鼠标悬停时显示指针 */
  background-color: #fff;
}

.club-info:hover {
  transform: translateY(-5px);
  /* 鼠标悬浮时上移 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  /* 鼠标悬浮时增强阴影 */
}

.club-header {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f7f7f7;
  /* 背景颜色 */
  border-bottom: 1px solid #e0e0e0;
  /* 分隔线 */
}

.club-logo {
  width: 60px;
  /* Logo 宽度 */
  height: 60px;
  /* Logo 高度 */
  border-radius: 30px;
  /* Logo 圆角 */
  margin-right: 15px;
  /* Logo 右侧间距 */
  border: 2px solid #ddd;
}

.club-header-text h3 {
  margin: 0;
  color: #333;
  /* 标题颜色 */
  font-size: 1.2em;
  /* 标题大小 */
}

.club-header-text .leader {
  margin: 5px 0 0;
  font-size: 0.9em;
  /* Leader 字体大小 */
  color: #666;
  /* Leader 字体颜色 */
}

.club-body {
  padding: 10px;
  line-height: 1.5;
  /* 行高 */
}

.club-body p {
  margin: 4px 0;
  /* 段落间距 */
}

.category,
.status {
  font-size: 0.9em;
  /* 分类和状态的字体大小 */
  color: #555;
  /* 分类和状态的字体颜色 */
}

.status .open {
  color: #4CAF50;
  /* 开放状态颜色 */
}

.status .closed {
  color: #F44336;
  /* 非开放状态颜色 */
}

.scroll-container {
  overflow-y: auto;
  /* 启用滚动 */
  height: 100%;
  /* 设置滚动区域的高度 */
  max-height: 75vh;
  /* 设置最大高度 */
  padding-bottom: 10px;
}

.special-image-popup {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.special-image-popup img {
  max-width: 100%;
  max-height: 100%;
}
</style>